<template>
  <div
    class="w-full flex flex-col h-screen bg-gradient-to-b from-indigo-700 to-indigo-900"
  >
    <!-- 头部标题 -->
    <div class="w-full h-12 flex flex-row justify-center items-center">
      <div class="flex-1 h-5 gradirent-l"></div>
      <div class="text-3xl text-white w-72 text-center">物流公司数据报告</div>
      <div class="flex-1 h-5 gradirent-r"></div>
    </div>
    <!-- 数据区域 -->
    <div class="w-full p-4 flex place-content-between flex-1">
      <!-- 左边部分 -->
      <div class="w-1/2 h-full bg-slate-700 p-3">
        <DataSummary class="h-1/3 w-full" />
      </div>
      <!-- 右边部分 -->
      <div class="w-1/2 h-full bg-orange-600"></div>
    </div>
  </div>
</template>
<script setup>
import DataSummary from './comp/DataSummary.vue';
</script>
<style lang="scss" scoped>
.gradirent-l {
  background: linear-gradient(
    to right,
    rgba(83, 68, 161, 0.1) 0%,
    rgba(83, 68, 161, 1) 60%,
    rgba(83, 68, 161, 1) 100%
  );
}
.gradirent-r {
  background: linear-gradient(
    to left,
    rgba(83, 68, 161, 0.1) 0%,
    rgb(83, 68, 161, 1) 60%,
    rgba(83, 68, 161, 1) 100%
  );
}
</style>
